<!-- 反馈列表 -->   
<template>
  <div class="feed-back-box">
    
    <!-- 商品列表 -->
    <div class="goods-box">
        <div class="goods-item" v-for="(item,index) in detail.goodsList" :key="index">
            <img :src="item.url" class="goods-img" />
            <div  class="goods-base-info">
                <div class="goods-name">{{item.goodsname}}</div>
                <div class="goods-other">
                  <div class="">赠品:黄金饼</div>
                  <div class="">X{{item.num}}</div>

                </div>
                
            </div>
        </div>
    </div>
    <div class="line12"></div>
    <div class="list-header">
        <div class="user-info">
          <img :src="detail.userDetail.thumb" class="feed-img" />
          <div class=""> 
              <div>{{detail.userDetail.username}} </div>  
              <div class="user-phone">{{detail.userDetail.userphone}} </div>  
          </div>
        </div>
        
    </div>
    <div class="content-box">
      
        {{detail.content}} 
    </div>


    <div class="bottom-btn-box">
      <div>联系他</div>
      <div>回复他</div>
    </div>
  </div> 
</template>

<script>
import api from '@/api/api.js'
export default {
  name: 'login',
  data () {
    return {
      detail:{
        userDetail:{
            thumb:'http://images.51zd.com.cn/upload/public/20210730/1627625722894-f91c12e7-7c12-4401.jpg',
            username:'ecctic',
            userphone:'13682545071',
        },
        goodsList:[
            { 
                goodsname:'番茄牛肉汤饭',
                url:'http://images.51zd.com.cn/upload/public/20210730/1627625722894-f91c12e7-7c12-4401.jpg',
                images:'http://images.51zd.com.cn/upload/public/20210730/1627625722894-f91c12e7-7c12-4401.jpg',
                num:2
            },
        ],
        content:'这机器多扣了我的钱,麻烦你们速速退钱。',
        addTime:'2021-10-21 12:31', 
        backreamrk:'',

      }
    }
  },
  mounted () { },
  methods: {
    preView(src,index){
      let urls = '';
      if(src.indexOf(",")<0){
        urls = src
      }else{
        urls = src.split(",")[index];
      }
      this.$imagePreview ({
        images: [urls],
        defaultOpt: {
          fullscreenEl: false,
          arrowEl: true,
          preloaderEl: true,
          bgOpacity: 0.85,
          showHideOpacity: true
        }

      })
    },
  }
}
</script>
<style lang="less" scoped>
.bottom-btn-box{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.0rem;
  border-top: 1rpx solid #f5f5f5;
  box-shadow: 0 0 4px #eee;
  display: flex;
  &>div{
    flex: 1;
    height: 100%;
    text-align: center;
    line-height: 1.0rem;
    font-size: .32rem;
  }
}
.goods-item{
  display: flex;
}
.goods-name{
  font-size: .32rem;
  font-weight: bold;
}
.line12{
  height: .12rem;
  background: #f5f5f5;
}
.goods-base-info{
  height: 1.28rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding-left: .20rem;
}
.goods-box{
  padding: .24rem .30rem;
}
.goods-other{
  display: flex;
  justify-content: space-between;
  color: #999;
}
.content-box{
  padding: .12rem .30rem;
}
.feed-img{
    width: 1.28rem;
    height: 1.28rem;
    margin-right: .20rem;
}
.goods-img{
  width: 1.28rem;
  height: 1.28rem;
  border-radius: .12rem;
}
.feed-back-box{
    min-height: 100vh;
    background: #fff;
    box-sizing: border-box;
}
.image-box img{
  width: 1.48rem;
  height: 1.48rem;
  border-radius: .12rem;
  margin-top: .20rem;
}
.user-info{
  display: flex;
}
.list-item{
    background: #fff;
    border-radius: .12rem;
    margin-bottom: .24rem;
    padding: .20rem;
    box-shadow: 0 3px 7px #ededed;
}
.list-header{
  display: flex;
  justify-content: space-between;
  padding: .24rem .30rem;
}
.feed-img{
  width: .72rem;
  height: .72rem;
  border-radius: 50%;
  margin-right: .12rem;

}
.add-time{
  color: #999;
  font-size: .22rem;
}
.user-phone{
  color: #666;
  font-size: .18rem;
  margin-top: .12rem;
}
.list-content{
  margin-top: .12rem;
  color: #666;
  letter-spacing: .02rem;

}
</style>
